<template>
  <f7-page>
    <f7-navbar class="no-hairline"></f7-navbar>
    <div class="content-padding login-register-content">
      <h1 class="title-h">{{$t('m.login1')}} <f7-link @click="$store.commit('toggleLangActions', true)">{{$t('m.s5')}}</f7-link></h1>
      <div class="select-accounts-box">
        <custom-input type="tel" v-model="loginFormItems.login_phone" :placeholder="$t('m.login2')" @focus="handlePhoneFocus" @blur="handlePhoneBlur"></custom-input>
        <!--<ul>
          <li>13312345678</li>
          <li>13399999999</li>
          <li>13388888888</li>
        </ul>-->
        <!--<my-select :show.sync="showDropDown" @select="handleDropDownSelect">
          <my-select-item v-for="(phone, index) in historyPhones" :key="index">{{phone}}</my-select-item>
        </my-select>-->
      </div>
      <custom-input type="password" v-model="loginFormItems.login_pwd" :placeholder="$t('m.login3')"></custom-input>

      <div class="links-box">
        <f7-link href="/login-with-phone-code/">{{$t('m.login4')}}</f7-link>
        <f7-link href="/forget-password/">{{$t('m.login5')}}</f7-link>
      </div>
      <div class="buttons-box">
        <f7-button fill color="blue" large @click="handleLogin">{{$t('m.login1')}}</f7-button>
        <f7-button color="black" large href="/register/">{{$t('m.login6')}}</f7-button>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import MySelect from '../ajComponents/smartSelect';
  import MySelectItem from '../ajComponents/smartSelect/item';
  import { getPhones } from "../utils/savePhone";
  export default {
    name: "login",
    data () {
      return {
        loginFormItems: {
          login_phone: '',
          login_pwd: '',
          type: 1
        },
        showDropDown: false
      }
    },
    computed: {
      historyPhones() {
        return getPhones();
      }
    },
    methods: {
      handlePhoneFocus() {
        this.showDropDown = true;
      },
      handlePhoneBlur() {
        setTimeout(() => {
          this.showDropDown = false;
        })
      },
      handleDropDownSelect (value) {
        this.loginFormItems.login_phone = value;
      },
      handleLogin () {
        this.$preloader.open(this.$t('m.login7'));
        this.$store.dispatch('Login', this.loginFormItems).then(() => {
          this.$preloader.close();
          this.$store.dispatch('GetInfo');
          this.$store.dispatch('GetConfig');
          this.$store.dispatch('GetCurrencyInfo');
          this.$store.dispatch('saveHistoryPhone', this.loginFormItems.login_phone);
          this.$toast(this.$t('m.login8'));
        }).catch(() => {
          this.$preloader.close();
        });
      }
    },
    components: {
      MySelect,
      MySelectItem
    }
  }
</script>

<style scoped lang="scss">
  .select-accounts-box {
    position: relative;
  }
  .title-h {
    display: flex;
    justify-content: space-between;
    .link {
      font-size: 30px;
    }
  }
</style>
